<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图书管理系统</title>
    <style>
        .bookBody {
            position: absolute;
            margin: 0; /*外边距*/
            padding: 0; /*内边距*/
            height: 100%;
        }

        div {
            width: 99%;
            border: 1px solid rebeccapurple;

        }

        .top, .footer { /*用逗号隔开的就是并集选择器*/
            height: 8%;
            background-color: thistle;


        }

        .content {
            height: 82%;
        }

        .content div { /*子集选择器**/
            display: inline-block;
            vertical-align: top;

        }

        .content li {
            line-height: 50px;
            border: 1px solid lightblue;
            list-style: none;
            margin-left: -30px;
        }

        .content .right div {
            line-height: 50px;
        }
    </style>
</head>
<body>
<div class="bookBody">
    <div class="top">

        <h1><img src="imgs.png" style="width: 40px;height: 40px;"/>图书管理系统</h1>
    </div>
    <div class="content">
        <div class="left" style="width: 20%;height: 100%;">
            <ul>
                <li>用户管理</li>
                <li>图书管理</li>
                <li>个人信息</li>
                <li>借阅管理</li>
            </ul>
        </div>
        <div class="right" style="width: 79%;height: 100%;">
            <form action="http://www.baidu.com" method="get" name="bookform">
                <div><span>图书名称：</span><input type="text" name="name"/></div>
                <div><span>图书价格：</span><input type="text" name="price"/></div>
                <div><span>图书作者：</span><input type="text" name="author"/></div>
                <div><span>图书类型：</span>
                    <select>
                        <option>计算机</option>
                        <option>人文</option>
                    </select>
                </div>
                <div><span>图书出版社：</span><input type="text" name="publisher"/></div>
                <div>
                    <button type="submit">提交</button>
                    <button type="reset">重置</button>
                    <button onclick="window.history.go(-1)">新增</button>
                </div>

            </form>

        </div>
    </div>
    <div class="footer">
        <!--超链接标签-->
        <a href="http://www.baidu.com" target="_blank">帮助</a>
    </div>
</div>

<!---脚本语句-->
<script>
    // document.getElementById("btn").onclick=function fun(){

    //     alert("通过js方式正在查询！！");
    // }


</script>
</body>
</html>